<template>
  <div class="water-quality-monitor">
    <!-- 左侧数据区域 -->
    <div class="left-panel">
      <div class="monitor-time">
        <span>监测时间</span>
        <span class="time-value">{{ datas.sampleTime }}</span>
      </div>

      <el-card class="index-card" shadow="hover">
        <div slot="header" class="card-header">
          <el-tag type="success" v-if="datas.waterQuality" class="reach-tag">{{
            datas.waterQuality
          }}</el-tag>
          <span>{{ datas.segmentIndex || "-" }}</span>
          <div style="margin-left: 20%">
            <span>水质评价：</span>
            <span>{{ datas.waterQuality || "-" }}</span>
          </div>
        </div>
        <div class="index-list">
          <span v-for="(item, index) in datas.itemDataList" :key="index"
            >{{ item.name }} <i class="value">{{ item.value || "-" }}</i></span
          >
          <!-- 若有更多指标可继续添加，或结合实际接口数据循环渲染 -->
        </div>
      </el-card>
      <div class="extra-info">
        <div class="extra-item">
          <span>所属流域：</span>
          <span>{{ datas.basinName || "-" }}</span>
        </div>
        <div class="extra-item">
          <span>所属河流：</span>
          <span>{{ datas.riverName || "-" }}</span>
        </div>
        <div class="extra-item">
          <span>所属区划：</span>
          <span>{{ datas.county || "-" }}</span>
        </div>
        <div class="extra-item">
          <span>断面分类：</span>
          <span>{{ datas.segmentCategory || "-" }}</span>
        </div>
        <div class="extra-item">
          <span>控制级别：</span>
          <el-tag type="info">{{ datas.controlLevel || "-" }}</el-tag>
        </div>
        <div class="extra-item">
          <span>水质目标：</span>
          <span></span>
        </div>
      </div>
    </div>
    <!-- 右侧地图区域 -->
    <div class="right-panel">
      <div class="map-placeholder">
        <MapContainer :points="points" :layerId="layerId"/>
      </div>
      <!-- 图例弹窗 -->
      <!-- <el-dialog title="图例" :visible.sync="legendVisible" width="30%">
        <div class="legend-content">
          <p>这里可放置地图各类标识的含义说明，比如不同颜色代表的水质等级等</p>
          <ul>
            <li>蓝色：良好水质区域</li>
            <li>绿色：达标水域</li>
        
          </ul>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="legendVisible = false">关闭</el-button>
        </span>
      </el-dialog> -->
    </div>
  </div>
</template>

<script>
import { getOverview } from "@/api/waterBusiness/interface.js";


export default {
  props: {
    dmid: {
      type: String,
      default: "",
    },
  },
  name: "WaterQualityMonitor",
  data() {
    return {
      legendVisible: false,
      datas: {},
      points:[],
      layerId:"shuizhi"
    };
  },
  components: {
             
MapContainer: () => import("@/components/MapContainer"),
  },
  mounted() {
    this.getOverview();
  },
  methods: {
    // 获取概览数据
    async getOverview() {
      const res = await getOverview(this.dmid);
      console.log(res);
      this.datas = res.data;
      this.points.push(res.data)
    },
    showLegend() {
      this.legendVisible = true;
    },
  },
};
</script>

<style scoped>
.water-quality-monitor {
  display: flex;
  padding: 20px;
  background-color: #fff;
  box-sizing: border-box;
}
.left-panel {
  width: 40%;
  padding-right: 20px;
}
.right-panel {
  width: 60%;
}
.monitor-time {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.time-value {
  font-weight: bold;
  color: #333;
}
.quality-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.quality-info .item {
  display: flex;
  align-items: center;
  margin-right: 30px;
}
.star-tag {
  padding: 6px 10px;
  margin-right: 5px;
}
.water-tag {
  padding: 6px 10px;
  margin-right: 5px;
}
.index-value {
  font-weight: bold;
  color: #333;
}
.index-card {
  margin-bottom: 20px;
}
.card-header {
  display: flex;
  align-items: center;
}
.reach-tag {
  margin-right: 10px;
}
.index-list {
  display: flex;
  flex-wrap: wrap;
}
.index-list span {
  width: 25%;
  margin: 5px 0;
  color: #666;
}
.index-list .value {
  color: #333;
  font-weight: bold;
}
.extra-info {
  display: flex;
  flex-wrap: wrap;
}
.extra-item {
  width: 50%;
  margin-bottom: 10px;
  color: #666;
}
.map-placeholder {
  width: 100%;
  height: 400px;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 14px;
}
.map-placeholder p {
  margin-bottom: 20px;
}
.legend-content {
  padding: 20px;
}
.legend-content ul {
  list-style: disc;
  margin-left: 20px;
  margin-top: 10px;
}
</style>
